<template>
	<view class="i-goods-group" :style="[viewStyle]">
		<layout-goods-list :storeId="storeId" :option="option" :requestGoods="option.goodsType !== 1"></layout-goods-list>
	</view>
	
</template>

<script lang="ts" setup>
	import layoutGoodsList from './child/goods-list.vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'

	const props = withDefaults(defineProps<{
		storeId ?: string
		option : {
			//商品列表类型 1手动添加的商品 2分类商品，应通过接口请求对应分类下的商品列表 3 分区商品，应通过接口请求对应分区下的商品列表
			goodsType : 1 | 2 | 3
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor : string
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius : number
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor : string
			//图标颜色 仅buttonType为2生效
			addIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//图标颜色 仅buttonType为4生效
			circularCarIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor : string
			//样式风格
			styleType : 0 | 1 | 2
			//底色背景
			backgroundColor : string
			//商品背景
			goodsBackgroundColor : string
			//jump跳转商品详情 add加入购物车
			buttonEvent : 'jump' | 'add'
			// 商品边距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 商品圆角
			goodsRadiusTop : number
			goodsRadiusBottom : number
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0|1|2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0|1|2
			//自定义活动角标图片地址
			signIconUrl : string
			// 商品分类
			goodsCategory ?: {
				name : string
				id : string
			},
			// 商品分组
			subarea ?: {
				name : string
				id : string
			},
			//显示的商品条数
			categoryGoodsNumber : number
			//商品排序 1千人千面 2自定义排序 
			categoryGoodsSort : 1|2
			//自定义排序类型 1综合  2销量 3价格升序 4价格降序 5访问量
			categoryGoodsSortType : number
			// 是否显示店铺
			storeShow: boolean
		}
	}>(), {
		option: () => ({
			goodsType: 1,
			goodsList: [],
			layoutType: 1,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonRadius: 4,
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonEvent: 'jump',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
			goodsCategory: {
				name: '',
				id: '',
			},
			subarea: {
				name: '',
				id: '',
			},
			categoryGoodsNumber: 10,
			categoryGoodsSort: 1,
			categoryGoodsSortType: 1,
			storeShow: false
		})
	})
	
	const ctx = useCurrentInstance()
	const { viewStyle } = useLayoutCompoments(ctx, props.option)
	

</script>

<style scoped lang="scss">

</style>